<template>
  <label class="checkbox">
    <input type="checkbox" :checked="checked" @change="change" />
    <span>
      <icon name="radio" class="icon-default" :size="50" />
      <icon name="radio-active" class="icon-active" :size="40" />
    </span>
  </label>
</template>

<script>
export default {
  name: 'Checkbox',
  props: {
    checked: Boolean
  },
  methods: {
    change (e) {
      this.$emit('change', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox {
  @include wh(40px,40px);
  span{
    .icon-default {
      display: block;
    }
    .icon-active {
      display: none;
    }
  }
  input {
    display: none;
    &:checked + span{
      .icon-default {
        display: none;
      }
      .icon-active {
        display: block;
      }
    }
  }
}
</style>
